<template>
    <div class="box" @scroll="scrollTop">
        <!-- 导航栏 -->
        <navList title="分类"></navList>
        <div style="height: 1rem;"></div>

        <van-row>
            <van-col span="4">
                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="(v, i) in list" :key="i" :title="v.cat_name" />
                </van-sidebar>
            </van-col>
            <van-col span="18" offset="2">
                <div v-for="(v, i) in list[active]?.children" :key="i">
                    <div>{{ v.cat_name }}</div>
                    <div>
                        <van-grid :border="false" :column-num="3">
                            <van-grid-item v-for="(value, index) in v.children" :key="index"
                                @click="toSearch(value.cat_name)">
                                <!-- <van-image :src="value.cat_icon" /> -->
                                <lazy-component>
                                    <img :src="value.cat_icon ? value.cat_icon : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                        v-lazy="value.cat_icon ? value.cat_icon : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                        alt="">
                                </lazy-component>
                                {{ value.cat_name }}
                            </van-grid-item>

                        </van-grid>
                    </div>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import { ref } from 'vue';

import navList from "@/components/navList.vue"

const active = ref(0);

import { categoriesApi } from "@/api/api";

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

let list = ref({})

const categoriesList = () => {
    categoriesApi().then((res) => {
        console.log(res)
        list.value = res.data.message

        setTimeout(() => {
            document.querySelector(".box").scrollTop = localStorage.getItem("scrollTop") * 1
        }, 200);
    })
}
categoriesList()

// 跳转到搜索列表
const toSearch = (name) => {
    // console.log(123)
    router.push({ path: '/main/home', query: { name: name } })
}

const scrollTop = (e) => {
    // console.log(e.target.scrollTop)
    localStorage.setItem("scrollTop", e.target.scrollTop)
}



</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>